<template>
  <div class="orderEvalate">
    <div class="container">
      <div class="title">
        <span>我的订单</span><b>></b><span>订单评价</span>
        <el-divider style="margin-top: 10px" border-style="dashed">
          <el-icon color="#c9adcb" size="30px"><Tickets /></el-icon>
        </el-divider>
      </div>
      <div class="evalate-content" v-for="(item,index) in 3">
        <div class="fl-products">
          <div class="fl-products-item">
            <a >
              <div class="img-box" href="">
                <img height="240" width="220" src="	http://lixinghe.meimeng.eu.org/flower/image/20141006231606_CrJmu.jpeg"  style="display: inline;">
              </div>
              <div class="product-content">
                <p class="product-title"> 夏日の花</p>
                <p class="product-price">
                  <span class="price-sign">¥</span>
                  <span class="primeCost">￥</span>
                </p>
              </div>
            </a>
          </div>
        </div>
        <div class="rate-text">
          <div class="product-star">
            <span>商品状态:</span>
            <el-rate v-model="value" size="large" />
          </div>
          <div class="logistics-star">
            <span>物流服务:</span>
            <el-rate v-model="value" size="large" />
          </div>
          <div class="text-info">
            <el-input v-model="desc"
                      :rows="4"
                      type="textarea"
                      placeholder="请输入商品评价" />
          </div>
          <div class="eavlate-img">
            <el-upload
                v-model:file-list="fileList"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";

  const value = ref()
  const desc = ref('')

  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)

  const fileList = reactive([
    {
      name: 'food.jpeg',
      url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
      name: 'food.jpeg',
      url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
      name: 'food.jpeg',
      url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
      name: 'food.jpeg',
      url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
  ])

  const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
  }

  const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
  }
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
  .orderEvalate {
    .container {
      width: 1250px;
      box-sizing: border-box;
      border: 1px solid #cbbbbb;
      border-radius: 10px;
      margin: 0 auto;
      min-height: 500px;
      .title {
        padding: 10px;
        span {
          font-weight: bolder;
          cursor: pointer;
        }
        b {
          margin: 0 20px;
        }
      }
      .evalate-content {
        padding: 30px 0;
        margin-top: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px dashed #de6565;
        .fl-products {
          .bd-l {
            display: inline-block;
            width: 288px;
            vertical-align: top;
            .link-cover {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              height: 160px;
              background: url("http://lixinghe.meimeng.eu.org/flower/image/home_linkcover.png");
              a {
                display: block;
                width: 240px;
                height: 60px;
                margin: 74px auto 0;
                border: 2px solid rgba(255,255,255,0.7);
                font-size: 22px;
                line-height: 56px;
                color: #fff;
                font-weight: bold;
                text-align: center;
              }
            }
          }
          .fl-products-item {
            display: inline-block;
            border-radius: 10px;
            width: 212px;
            height: 330px;
            background-color: #fff;
            vertical-align: top;
            border:1px solid #e3d5d5;
            &:hover {
              transition: all 0.3s linear;
              box-shadow:0 0 20px #cccccc;
            }
            .img-box {
              width: 100%;
              height: 228px;
              overflow: hidden;
              cursor: pointer;
              img {
                width: 100%;
                max-width: 100%;
                height: auto;
                vertical-align: bottom;
                text-decoration: none;
              }
            }
            .product-content {
              padding: 10px 8px 14px;
              text-align: center;
              color: #232628;
            }
            &:hover .product-content p{
              color: orange;
            }
            .product-title {
              max-width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 16px;
              line-height: 20px;
            }
            .product-price {
              margin-top: 5px;
              font-size: 16px;
              font-weight: bold;
              line-height: 20px;
            }
            .product-sell {
              margin-top: 6px;
              font-size: 12px;
              color: #71797F;
              line-height: 16px;
            }
          }
        }
        .rate-text {
          border: 1px solid #c8c0cf;
          min-width: 774px;
          padding: 20px;
          .text-info {
            margin: 20px 0;
          }
          .product-star {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
</style>
